* {
	margin: 0;
	padding: 0;
}

html,
body,
img {
	width: 100%;
	height: 100%;
}


/*首页*/

.layer1_bg {
	width: 100%;
	height: 100%;
	background-image: url(../img/1/layer1_bg.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.logo1 {
	position: absolute;
	top: 5%;
	left: 5%;
	width: 15%;
}

.logo2 {
	position: absolute;
	top: 6%;
	left: 25%;
	width: 25%;
}

.layer1_text1 {
	position: absolute;
	top: 15%;
	left: 0%;
	width: 100%;
	animation: bounceInRight 1s linear 0s;
}

.layer1_text2 {
	position: absolute;
	top: 35%;
	left: 35%;
	width: 55%;
	animation: bounceInLeft 1s linear 0s;
}

.layer1_text3 {
	position: absolute;
	top: 42%;
	left: 20%;
	width: 65%;
	animation: zoomInUp 2s linear 0s;
}

.challenge {
	position: absolute;
	top: 70%;
	left: 0%;
	width: 100%;
	animation: pulse 1s linear 0s infinite;
}

.rules {
	position: absolute;
	top: 80%;
	left: 35%;
	width: 25%;
}


/*游戏规则*/

.layer2 {
	display: none;
}

.layer2_bg {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.8;
}

.rules_bg {
	position: absolute;
	top: 20%;
	left: 10%;
	width: 80%;
}

.rules_Shut {
	position: absolute;
	top: 18%;
	left: 81%;
	width: 15%;
}

.layer2_title {
	position: absolute;
	top: 5%;
	left: 10%;
	width: 80%;
	animation: rollIn 0.5s ease-in-out 0s;
}

.layer2_challenge {
	position: absolute;
	top: 70%;
	left: 0%;
	width: 100%;
	animation: pulse 1s linear 0s infinite;
}


/*开始游戏页*/

.layer3 {
	width: 100%;
	height: 100%;
	background-image: url(../img/3/challenge_bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0%;
	left: 0%;
	display: none;
}

@-webkit-keyframes layer3_text1 {
	0% {
		top: 15%;
		transform: scale(0, 0);
	}
	50% {
		top: 55%;
		transform: scale(1.5, 1.5);
	}
	100% {
		top: 35%;
		transform: scale(1, 1);
	}
}

.layer3_text1 {
	position: absolute;
	top: 35%;
	left: 15%;
	width: 70%;
	animation: layer3_text1 1s ease-in-out 0s;
}

@-webkit-keyframes layer3_text2 {
	0% {
		top: 25%;
		transform: scale(0, 0);
	}
	50% {
		top: 65%;
		transform: scale(1.5, 1.5);
	}
	100% {
		top: 45%;
		transform: scale(1, 1);
	}
}

.layer3_text2 {
	position: absolute;
	top: 45%;
	left: 10%;
	width: 80%;
	animation: layer3_text2 1.5s ease-in-out 0s;
}

.begin {
	position: absolute;
	top: 55%;
	left: 0%;
	width: 100%;
	animation: pulse 1s linear 0s infinite;
}

.instructions {
	position: absolute;
	top: 65%;
	left: 10%;
	width: 80%;
}